<template>
  <div id="app">
    <h1>{{ title }}</h1>
    <router-link to="/user/region">Region</router-link>
    |
    <router-link to="/news/newsDetails">News</router-link> |
    <router-link to="/home">Home</router-link> |
    <router-link to="/about">About</router-link>
    <!--   测试   -->
    <div class="com-wrapper">
      <yioks-tips :tips="tips">你好</yioks-tips>
    </div>

    <div class="class-wrapper">
      <button @click="handleClassTest">测试class方法</button>
    </div>

    <div class="dialog-btn-box">
      <el-button type="primary" @click="openDialog">打开弹窗</el-button>
    </div>

   <div style="width: 500px">
      <el-form ref="form" :rules="formRules" :model="form" label-width="80px">
        <el-form-item label="测试" prop="ceshi">
          <el-input v-model="form.ceshi"></el-input>
        </el-form-item>
      <div v-for="(item, index) in form.list" :key="index">
        <el-form-item label="姓名"  :prop="`list.${index}.name`">
          <!-- -->
          <el-input v-model="item.name" ></el-input>
        </el-form-item>

        <el-form-item label="年龄" :prop="`list.${index}.age`" >
          <!-- -->
          <el-input v-model="item.age" ></el-input>
        </el-form-item>

        <el-form-item label="随便" :prop="`list.${index}.isPass`" >
          <!--  -->
          <el-input v-model="item.isPass"></el-input>
        </el-form-item>
      </div>
    </el-form>

   </div>
    <yioks-dialog
      :isVisible="isShowDialog"
      :info="dialogInfo"
      @flagsChange="handleGetFlagsStatus"
    ></yioks-dialog>
  </div>
</template>

<script>

function requiredItem(formName, timeFlag) {
  timeFlag || (timeFlag = false);
  formName || (formName = '该项')
  return {
    required: true,
    message: `${formName}是必填信息`,
    trigger: timeFlag ? 'change': 'blur'
  }
}
const _formData = {
  list: [
    {
      name: "张三",
      age: 12,
      isPass: true,
    },
    {
      name: "刘六",
      age: 16,
      isPass: false,
    },
  ],
};
function outRules(list, listName) {
  let rulesList = {};
  if (list.length) {
    list.forEach((item, index) => {
      const keysList = Object.keys(item);
      let aimObj = {};
      keysList.forEach((key) => {
        const temObj = {
          [`${[listName]}.${index}.${key}`]: [requiredItem()],
        };
        aimObj = Object.assign({}, aimObj, temObj);
      });
      rulesList = Object.assign({}, rulesList, aimObj);
    });
  }
  return rulesList;
}

console.log("outRules( _formData.list)", outRules(_formData.list, "list"));

// let PageInit = class {
//   constructor(){
//      console.log('类初始化')
//   }
//
//    pageLoad() {
//      console.log('加载方法')
//    }
//
//    pageSubmit() {
//      console.log('提交方法')
//    }
//  };

export default {
  name: "Details",
  components: {
    "yioks-tips": () => import("./components/yioks-title"),
    "yioks-dialog": () => import("./components/tips"),
  },
  data() {
    return {
      title: "detaile",
      tips: "一剑光寒耀九州",
      pageInit: null,
      isShowDialog: false,
      dialogInfo: {
        name: "张三丰",
        address: "地球村",
      },

      form: {
        list: [
          {
            name: "",
            age: "",
            isPass: 'true',
          },
          {
            name: "",
            age: "",
            isPass: 'true',
          },
        ],
      },
      // formRules: {
      //   // outRules(_formData.list, "list"))
      // },
    };
  },
  computed: {
    formRules() {
      return  outRules(this.form.list, "list")
    }
  },
  created() {
    this.pageInit = new this.PageInit();
  },
  methods: {
    PageInit: class {
      constructor() {
        console.log("类初始化");
      }

      pageLoad() {
        console.log("加载方法");
      }

      pageSubmit() {
        console.log("提交方法");
      }
    },
    handleClassTest() {
      console.log("这里是测试方法");
      this.pageInit.pageSubmit();
    },
    // 打开弹窗
    openDialog() {
      this.isShowDialog = true;
    },
    handleGetFlagsStatus(status, confirm) {
      this.isShowDialog = status;
      if (confirm) {
        console.log("this is text for ok");
      } else {
        console.log("this is text for cancel");
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.class-wrapper {
  width: 100%;
  height: 300px;
  background-color: lightseagreen;
}
</style>
